金魚都能懂的網頁切版:21
https://codepen.io/mikeyam/pen/rNLVmKq?editors=1100
HTML排版部分,規劃為上方圖片,下方為文字排版
<div class="banner"></div>
<div class="content"></div>
banner,放上一張圖片
.banner{
height: 700px;
background: url('https://images.unsplash.com/photo-1601974959109-a1217f73728c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80') center top / cover;
}
設定外層寬度
.content .container{
width: 1200px;
display: flex;
margin: auto;
padding: 100px 0;
z-index: 2;
position: relative;
}
文字內容設定
.content .box{
width: 570px;
margin: 0 15px;
}
.content .box p{
line-height: 1.7;
margin-bottom: 1.6em;
}
.content .box h2{
margin-bottom: 1.3em;
}
.content{
position: relative;
}
在文字這層的class(.content)使用偽元素,向上做出box-shadow,因此可以知道不規則圖形適用box-shadow一層層推疊出來
.content::after{
content: '';
display: block;
position: absolute;
width: 200px;
height: 200px;
background-color: #fff;
top: 0;
left: 50%;
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 178px 0 0 30px #fff,
327px 34px 0 20px #fff,
480px 9px 0 60px #fff,
690px 71px 0 60px #fff,
880px 0 0 89px #fff,
-178px 0 0 30px #fff,
-327px 34px 0 20px #fff,
-480px 9px 0 60px #fff,
-690px 71px 0 60px #fff,
-880px 0 0 89px #fff,
-1100px 50px 0 89px #fff,
100px 0px 0 56px rgba(0,0,10,.5),
298px 10px 0 56px rgba(0,0,10,.5),
540px -40px 0 50px rgba(0,0,10,.5),
740px -30px 0 30px rgba(0,0,10,.5),
880px -100px 0 80px rgba(0,0,10,.5),
1000px 0px 0 80px rgba(0,0,10,.5),
-60px 0px 0 56px rgba(0,0,10,.5),
-298px 10px 0 56px rgba(0,0,10,.5),
-540px -40px 0 50px rgba(0,0,10,.5),
-740px -30px 0 30px rgba(0,0,10,.5),
-780px -70px 0 80px rgba(0,0,10,.5),
-1200px 0px 0 80px rgba(0,0,10,.5);
}
在次使用偽元素把多出來地方做覆蓋
.content::before{
content: '';
position: absolute;
width: 100%;
height: 200px;
z-index: 1;
background: #fff;
top: 0;
left: 0;
}